<template>
    <view class="content">
        <image src="../../static/image/us.png" class="us-bg"></image>
        <u-navbar title="我的" :background="background" title-size="32" :border-bottom="false" :immersive="true" :is-back="false" title-color="#000" title-width="300"></u-navbar>
        
        <view :style="{paddingTop: statusBar + 45 + 'px'}">
            <view class="top">
                <image :src="info.image || '../../static/icon/avatar.png'" class="avatar"></image>
                <view class="u-flex-1">
                    <view class="name">{{ info.user_name || '用户名内容' }}</view>
                    <view class="tel" v-if="info.phone">
                        <image src="../../static/icon/tel.png" class="tel-icon"></image>
                        <view>{{info.phone}}</view>
                    </view>
                </view>
                <view class="edit" @click="toPage(`/pages/info/info`)">
                    <image src="../../static/icon/icon_03.png" class="icon-03"></image>
                    <view>编辑</view>
                </view>
            </view>
            
            <view class="wrapper">
                <view class="credit" v-if="info">
                    <view class="credit-i">
                        <view class="u-flex">
                            <image src="../../static/icon/icon_04.png" class="icon-04"></image>
                            <view>信用额度（元）</view>
                        </view>
                        <view class="u-font-40 u-p-t-5">{{info.credit_limit}}</view>
                    </view>
                    <view class="line"></view>
                    <view class="credit-i">
                        <view class="u-flex">
                            <image src="../../static/icon/icon_05.png" class="icon-04"></image>
                            <view>可用额度（元）</view>
                        </view>
                        <view class="u-font-40 u-p-t-5">{{info.available_limit}}</view>
                    </view>
                </view>
                
                <view class="box">
                    <view class="balance-top">
                        <image src="../../static/icon/icon_06.png" class="icon-06"></image>
                        <view class="price">
                            我的余额 <text class="price-num">{{info.balance || 0}}</text>元
                        </view>
                        <view class="more" @click="toPage(`/pages/recharge/balance`)">查看更多</view>
                    </view>
                    <view class="balance">
                        <view class="balance-i" @click="toPage(`/pages/recharge/recharge`)">
                            <image src="../../static/icon/icon_07.png" class="icon-07"></image>
                            <view>余额充值</view>
                        </view>
                        <view class="line2"></view>
                        <view class="balance-i" @click="toPage(`/pages/recharge/recharge-list`)">
                            <image src="../../static/icon/icon_08.png" class="icon-07"></image>
                            <view>充值明细</view>
                        </view>
                    </view>
                </view>
                
                <view class="box">
                    <view class="o-top">
                        <view class="o-title">订单管理</view>
                        <view class="o-more" @click="toOrder('/pages/tabbar/order', 0)">
                            <text>查看更多</text>
                            <u-icon name="arrow-right" color="#cdcdcd" size="28"></u-icon>
                        </view>
                    </view>
                    <view class="ord-box">
                    	<view class="wid" @click="toOrder('/pages/tabbar/order', 1)">
                    		<image src="../../static/icon/icon_11.png" mode=""></image>
                            <view class="ord-num" :class="{'ord-num2' : info.count1 > 9 }" v-if="info.count1 > 0">
                                {{info.count1 > 99 ? '99+' : info.count1}}
                            </view>
                    		<view class="ord-t">待支付</view>
                    	</view>
                    	<view class="wid" @click="toOrder('/pages/tabbar/order', 2)">
                    		<image src="../../static/icon/icon_12.png" mode=""></image>
                            <view class="ord-num" :class="{'ord-num2' : info.count2 > 9 }" v-if="info.count2 > 0">
                                {{info.count2 > 99 ? '99+' : info.count2}}
                            </view>
                    		<view class="ord-t">待发货</view>
                    	</view>
                    	<view class="wid" @click="toOrder('/pages/tabbar/order', 3)">
                    		<image src="../../static/icon/icon_13.png" mode=""></image>
                            <view class="ord-num" :class="{'ord-num2' : info.count3 > 9 }" v-if="info.count3 > 0">
                                {{info.count3 > 99 ? '99+' : info.count3}}
                            </view>
                    		<view class="ord-t">运输中</view>
                    	</view>
                    	<view class="wid" @click="toOrder('/pages/tabbar/order', 4)">
                    		<image src="../../static/icon/icon_14.png" mode=""></image>
                    		<view class="ord-t">已到达</view>
                    	</view>
                    	<view class="wid" @click="toOrder('/pages/tabbar/order', 5)">
                    		<image src="../../static/icon/icon_16.png" mode=""></image>
                    		<view class="ord-t">已完成</view>
                    	</view>
                        <view class="wid" @click="toOrder('/pages/tabbar/order', 6)">
                        	<image src="../../static/icon/icon_15.png" mode=""></image>
                        	<view class="ord-t">取消</view>
                        </view>
                    </view>
                </view>
                
                <view class="box d-nav">
                    <view class="d-nav-l" @click="toPage(`/pages/coupon/coupon`)">
                        <image src="../../static/icon/price_02.png" class="price-02"></image>
                        <view>优惠券</view>
                    </view>
                    <view class="d-nav-c" @click="toPage(`/pages/feedback/feedback`)">
                        <image src="../../static/icon/icon_09.png" class="price-02"></image>
                        <view>意见反馈</view>
                    </view>
                    <view class="d-nav-r" @click="KFshow = true">
                        <image src="../../static/icon/icon_10.png" class="price-02"></image>
                        <view>服务监督</view>
                    </view>
                </view>
            </view>
        </view>
		
		<u-mask :show="KFshow" mode="center" border-radius="15">
		    <view class="popup">
		        <view class="win-box2">
		            <view class="pop-up">
		                <view>服务监督</view>
		            </view>
		            <view class="pop-call">
		                <view>
		                    <view class="school">电话</view>
		                    <view class="u-font-34 text-bold">{{info.service_phone}}</view>
		                </view>
						<view class="bohao" v-if="info.service_phone" @click="$call(info.service_phone)">拨号</view>
		            </view>
					<view class="work-time" v-if="info.work_time">工作时间 {{info.work_time}}</view>
					<view class="pop-del">
						<u-icon name="close-circle" color="#fff" size="70" @click="KFshow = false"></u-icon>
					</view>
		        </view>
		    </view>
		</u-mask>
        <!-- 底部导航 -->
        <u-tabbar v-model="current" :list="tab_list" active-color="#00457f" inactive-color="#5d5f6a" :border-top="true" @change="tabbarChange"></u-tabbar>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
                current: 0, //底部导航索引
                tab_list: [],
				info: {},
				KFshow: false,
				service: {},//客服
            };
        },
        onLoad() {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	}
            });
			
			// 接收身份监听
			uni.$on('identityChange', data => {
			    this.tabbarInfo();
			})
        },
        onShow() {
			if (this.$getSync('userToken')) {
				this.getInfo()
			}
			if (this.$getSync('identity') == 2) {
				this.$sTo(`/pages/tabbar/driver`)
			} else if (this.$getSync('identity') == 3) {
				uni.reLaunch({
					url: '/pagesA/leader/leader'
				});
			}
			this.tabbarInfo();
        },
        methods: {
			toOrder(url, num) {
				uni.$emit('OPEN_ORDER', num)
				this.$sTo(url)
			},
			
            toPage(url) {
                if (!uni.getStorageSync('userToken')) {
                    this.$confirm('请先登录并且绑定手机号，是否去登录？',()=>{
                        uni.navigateTo({
                            url: "/pagesA/login/login"
                        })
                    })
                } else if (!uni.getStorageSync('MOBILE')) {
                    this.$confirm('您还没有绑定手机号，是否去绑定？',()=>{
                        uni.navigateTo({
                            url: "/pagesA/login/login?show=1"
                        })
                    })
                } else {
                	this.$gTo(url)
                }
            },
			
			getInfo() {
			    this.$ajax('user_detail', {
			        user_token: this.$getSync('userToken'),
			    }).then(ret => {
			        if (ret.success == 1000) {
			            this.info = ret.detail
			        } else {
			            this.$toast(ret.msg);
			        }
			    });
			},
            
            //切换底部导航
            tabbarChange(e) {
            	this.current = e;
            },
            
            tabbarInfo(){
                // 用户
                if (this.$getSync('identity') == 1) {
                    this.tab_list = [
                        {
                            iconPath: "/static/icon/tab_01.png",
                            selectedIconPath: "/static/icon/tab_02.png",
                            text: '发货',
                            pagePath: "/pages/tabbar/index"
                        },{
                            iconPath: "/static/icon/tab_03.png",
                            selectedIconPath: "/static/icon/tab_04.png",
                            text: '订单',
                            pagePath: "/pages/tabbar/order"
                        },{
                            iconPath: "/static/icon/tab_05.png",
                            selectedIconPath: "/static/icon/tab_06.png",
                            text: '我的',
                            pagePath: "/pages/tabbar/mine"
                        }
                    ];
                }
                // 司机
                if(this.$getSync('identity') == 2){
                    this.tab_list = [
                        {
                            iconPath: "/static/icon/tab_01.png",
                            selectedIconPath: "/static/icon/tab_02.png",
                            text: '首页',
                            pagePath: "/pages/tabbar/driver"
                        },{
                            iconPath: "/static/icon/tab_05.png",
                            selectedIconPath: "/static/icon/tab_06.png",
                            text: '我的',
                            pagePath: "/pages/tabbar/driver-mine"
                        }
                    ];
                }
            },
            
            onPageScroll: function(e) {
            	//nvue暂不支持滚动监听，可用bindingx代替
            	// console.log("滚动距离为：" + e.scrollTop);
            	let a = e.scrollTop * 0.05;
            	if (a > 1) {
            		a = 1;
            	}
            	if (e.scrollTop == 0) {
            		this.background.backgroundColor = 'rgba(255,255,255,0)';
            	} else {
            		this.background.backgroundColor = 'rgba(255,255,255,' + a + ')';
            	}
            },
        }
    };
</script>

<style lang="scss">
    
    
    
    
    
    page{
        background: linear-gradient(180deg,#f8fafd, #f2f4fa);
    }
    .us-bg{
        width: 750rpx;
        height: 410rpx;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    .top{
        padding-left: 20rpx;
        padding-bottom: 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .avatar{
        width: 110rpx;
        height: 110rpx;
        border: 2rpx solid #fff;
        border-radius: 50%;
        margin-right: 28rpx;
    }
    .name{
        flex: 1;
        font-size: 35rpx;
        font-weight: bold;
        padding-bottom: 10rpx;
    }
    .tel{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 220rpx;
        padding: 7rpx 0 7rpx 12rpx;
        background-color: #eceeef;
        border-radius: 50rpx;
        font-size: 24rpx;
        color: #565656;
    }
    .tel-icon{
        width: 29rpx;
        height: 29rpx;
        margin-right: 10rpx;
    }
    .edit{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 12rpx 30rpx 12rpx 15rpx;
        background-color: #fff;
        border-radius: 50rpx 0 0 50rpx;
        box-shadow: 2rpx 2rpx 2rpx #e5eef8;
        font-size: 24rpx;
    }
    .icon-03{
        width: 29rpx;
        height: 29rpx;
        margin-right: 10rpx;
    }
    .wrapper{
        padding: 20rpx;
    }
    .credit{
        width: 710rpx;
        padding: 35rpx 0;
        background: linear-gradient(to right, #cae1f9,#5ea3e7);
        border-radius: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;
    }
    .line{
        width: 2rpx;
        height: 88rpx;
        background-color: #7aa3dd;
    }
    .credit-i{
        width: calc(698rpx / 2);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding-left: 50rpx;
        font-size: 26rpx;
        color: #004293;
    }
    .icon-04{
        width: 43rpx;
        height: 43rpx;
        margin-right: 7rpx;
    }
    
    .box{
        background-color: #fff;
        border-radius: 20rpx;
        padding: 0 25rpx;
        margin-bottom: 16rpx;
    }
    .balance-top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
    }
    .icon-06{
        width: 72rpx;
        height: 72rpx;
        margin-right: 15rpx;
    }
    .price{
        flex: 1;
        font-size: 28rpx;
        color: #101d36;
    }
    .price-num{
        font-size: 58rpx;
        font-weight: bold;
        padding-left: 15rpx;
    }
    .more{
        font-size: 24rpx;
        color: #5f5f5f;
        padding: 15rpx 20rpx;
        border: 2rpx solid #dedede;
        border-radius: 10rpx;
    }
    .balance{
        padding: 30rpx 0;
        border-top: 2rpx solid #ebebeb;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .balance-i{
        width: calc(698rpx / 2);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        color: #101d36;
    }
    .icon-07{
        width: 29rpx;
        height: 30rpx;
        margin-right: 12rpx;
    }
    .line2{
        width: 2rpx;
        height: 32rpx;
        background-color: #ebebeb;
    }
    
    .o-top{
        padding-top: 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .o-title{
        font-size: 30rpx;
        color: #101d36;
        font-weight: bold;
    }
    .o-more{
        font-size: 24rpx;
        color: #a8a8a8;
    }
    .ord-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 35rpx 0 40rpx;
    }
    .wid {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        
    	image {
    		width: 46rpx;
    		height: 46rpx;
    		margin-bottom: 10rpx;
    	}
        
        .ord-num{
            font-size: 22rpx;
            line-height: 1;
            color: #fff;
            padding: 5rpx 8rpx;
            background-color: #fa3c07;
            border-radius: 50%;
            position: absolute;
            right: -10rpx;
            top: -10rpx;
        }
        .ord-num2{
            font-size: 22rpx;
            line-height: 1;
            color: #fff;
            padding: 6rpx 4.5rpx;
            background-color: #fa3c07;
            border-radius: 50%;
            position: absolute;
            right: -10rpx;
            top: -10rpx;
        }
    	.ord-t {
    		font-size: 25rpx;
    	}
    }
    
    .d-nav{
        padding: 35rpx 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .d-nav>view{
        width: 200rpx;
        height: 135rpx;
        border-radius: 15rpx;
        font-size: 26rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .d-nav-l{
        background-color: #e9f3ff;
    }
    .d-nav-c{
        background-color: #ebf9f9;
    }
    .d-nav-r{
        background-color: #fdf3e9;
    }
    .price-02{
        width: 45rpx;
        height: 45rpx;
        margin-bottom: 10rpx;
    }
    
    .work-time{
        font-size: 26rpx;
        color: #a8a8a8;
        text-align: center;
        padding: 20rpx;
    }
	
	
	// 客服弹窗
	.popup {
	    width: 100vw;
	    height: 100vh;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    flex-direction: column;
	}
	.win-box2 {
	    width: 77vw;
	    background-color: #ffffff;
	    border-radius: 20upx;
	    position: relative;
	    background: #fff;
	    border-radius: 10rpx;
	    padding-bottom: 20rpx;
	}
	.pop-up {
	    width: 77vw;
	    height: 166upx;
	    background: linear-gradient(to right, #01744d, #66cba9);
	    color: #fff;
	    border-top-left-radius: 10upx;
	    border-top-right-radius: 10upx;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    box-sizing: border-box;
	    padding-left: 55upx;
	    padding-right: 24upx;
	    position: relative;
	}
	.school{
	    font-size: 22rpx;
	    padding-top: 5rpx;
	}
	.pop-up > view {
	    font-size: 40upx;
	    color: #ffffff;
	}
	.pop-up > image {
	    font-size: 40upx;
	    color: #ffffff;
	    width: 290upx;
	    height: 207upx;
	    position: absolute;
	    bottom: 0;
	    right: 24upx;
	}
	.pop-call {
	    width: 66vw;
	    display: flex;
	    justify-content: space-between;
	    align-items: flex-end;
	    padding: 30upx 0;
	    margin: 0 auto;
	    font-weight: bold;
	
	    image {
	        width: 155rpx;
	        height: 56rpx;
	    }
	}
	.bohao{
		color: #246c1c;
		border: 2rpx solid #246c1c;
		padding: 10rpx 40rpx;
		border-radius: 50rpx;
	}
	.pop-del {
	    width: 8vw;
	    height: 8vw;
	    position: absolute;
	    left: 32vw;
	    bottom: -100upx;
	}

</style>
